<template>
	<div class="card mb-0" id="bill-detail-refund" v-if="detailInfo !== undefined && detailInfo !== null && detailInfo.refundTickets.length > 0">
    <div class="card-header" v-if="!hideLabel">退票明细</div>
      
    <table class="table table-striped table-hover table-sm mb-0">
      <thead v-if="!hideLabel">
          <tr>
              <th>票号</th>
              <th>乘客</th>
              <th class="text-center bg-info text-white" colspan="7">行程</th>
              <th>原付金额</th>
              <th>航司退票费</th>
              <th>服务费</th>
              <th>实退客户</th>
              <th>航司实退 </th>
              <th>利润</th>
              <th></th>
          </tr>
      </thead>
      <tbody>
        <template  v-for="info in detailInfo.refundTickets">
          <tr :key="info.id">   
              <td>{{info.balanceCode}}-{{(info.ticketNo)}}</td>                             
              <td>
                  {{info.psgName}}
              </td>
              <td>
                  <template v-for="(flt, index) in info.flights">
                    {{flt.flightNo}}
                    <template v-if="index < info.flights.length - 1 "><br/></template>
                  </template>
              </td>
              <td>
                  <template v-for="(flt, index) in info.flights">
                    {{flt.subclass}}
                    <template v-if="index < info.flights.length - 1 "><br/></template>
                  </template>
              </td>
              <td>
                  <template v-for="(flt, index) in info.flights">
                    <small class="text-success">{{flt.departureAirport}}{{flt.departureAirportName}} {{flt.departureTerminal}}</small>
                    <template v-if="index < info.flights.length - 1 "><br/></template>
                  </template>
              </td>
              <td>
                  <template v-for="(flt, index) in info.flights">
                    <small class="text-success">{{flt.arrivalAirport}}{{flt.arrivalAirportName}} {{flt.arrivalTerminal}}</small>
                    <template v-if="index < info.flights.length - 1 "><br/></template>
                  </template>
              </td>
              <td>
                  <template v-for="(flt, index) in info.flights">
                    {{flt.departureDate}}
                    <template v-if="index < info.flights.length - 1 "><br/></template>
                  </template>
              </td>
              <td>
                  <template v-for="(flt, index) in info.flights">
                    {{flt.departureTime}}
                    <template v-if="index < info.flights.length - 1 "><br/></template>
                  </template>
              </td>
              <td>
                  <template v-for="(flt, index) in info.flights">
                    {{flt.arrivalTime}}
                    <template v-if="index < info.flights.length - 1 "><br/></template>
                  </template>
              </td>                    
              <td>{{info.ticketAmount}}</td>
              <td>{{info.airRefundCharge}}</td>
              <td>{{info.serviceCharge}}</td>
              <td>{{info.passengerRefundAmount}}</td>
              <td>{{info.airlineRefundAmount}}</td>
              <td>{{info.profit}}</td>
          </tr>
        </template>
      </tbody>
    </table>
  </div>
</template>

<script>
  export default {
    props: {
      detailInfo: {
        type: Object
      },
      hideLabel: {
        type: Boolean,
        default: false
      }
    }
  }		
</script>